<template>
  <div>
    <Table border :columns="columns" :data="Earthlist">
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">修改</Button>
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>
    <Modal v-model="modal2" title="地震信息" @on-ok="ok" :mask-closable="false">
      <div>
        <span>日期：</span>
        <DatePicker
          type="date"
          confirm
          placeholder="日期"
          style="width: 70%"
          :value="date.time"
          @on-change="changeData"
        />
      </div>
      <div style="margin-top: 6px">
        <span>地点：</span>
        <Input placeholder="地点" style="width: 70%" v-model="date.address"/>
      </div>
      <div style="margin-top: 6px">
        <span>震级：</span>
        <Input placeholder="震级" style="width: 70%" v-model="date.magnitude"/>
      </div>
    </Modal>
  </div>
</template>
<script>
import { type } from "os";
// import UpdataEarthMessage from "@/components/UpdataEarthMessage.vue";
export default {
  data() {
    return {
      columns: [
        {
          title: "序号",
          key: "id"
        },
        {
          title: "地点",
          key: "address"
        },
        {
          title: "时间",
          key: "time"
        },
        {
          title: "震级",
          key: "magnitude"
        },
        {
          title: "操作",
          slot: "action"
        }
      ],
      modal2: false,
      index: "",
      date: {
        time: "",
        magnitude: "",
        address: "",
        id: ""
      }
    };
  },
  computed: {
    Earthlist() {
      return this.$store.getters.getEarthList;
    }
  },
  methods: {
    show(index) {
      let item = this.$store.getters.getEarthListItem(index);
      this.date.time = item.time;
      this.date.address = item.address;
      this.date.magnitude = item.magnitude;
      this.date.id = item.id;
      this.index = index;
      this.modal2 = true;
    },
    ok() {
      this.$store.dispatch("UPDataEarthlist", [
        {
          time: this.date.time,
          magnitude: this.date.magnitude,
          address: this.date.address,
          id: this.date.id
        },
        this.index
      ]);
    },
    remove(index) {
      this.$store.dispatch("RemoveEarthlistItem", index);
    },
    changeData(a) {
      this.date.time = a;
    }
  }
};
</script>

